<template>
  <div v-if="empty" class="robot-container-empty">
    <div class="hi">Hi,</div>
    <div class="imyourdaddy">我是您的智能语音助手！</div>

    <div class="doll-wrapper">
      <img src="../assets/robot-bg-1.png" class="r-bg bg-1" />
      <img src="../assets/robot-bg-2.png" class="r-bg bg-2" />
      <img src="../assets/robot-bg-3.png" class="r-bg bg-3" />
      <div class="doll empty-doll">
        <img src="./icon-yuyin.png" class="doll-bounce" />
        <img src="./icon-shadow.png" class="doll-shadow" />
      </div>
    </div>
  </div>

  <div v-else class="robot-container">
    <div class="doll">
      <img src="../assets/robot-bg.png" class="rotate-bg" />
      <img src="./icon-yuyin.png" class="doll-bounce" />
      <img src="./icon-shadow.png" class="doll-shadow" />
    </div>
  </div>

  <AnswerItem v-if="empty" show-more :item="fooAnswer" @recomand="handleRecomand" />
</template>

<script setup lang="ts">
import AnswerItem from './answerItem.vue'
const props = defineProps<{
  empty: boolean
}>()

const emit = defineEmits(['recomand'])

const handleRecomand = (str: string) => {
  emit('recomand', str)
}
const fooAnswer = {
  id: 'foobar',
  type: 2,
  classId: 5,
  content: `您可以向我发出如下指令：
  青岛市GDP是多少 青岛有哪些热门旅游景点 打开公共服务领域 生成一篇经济运行情况的分析报告
  `
  // content: `您可以向我发出如下指令：
  // 23年2季度即墨区GDP是多少 即墨区政府在哪里 打开公共服务领域 23年2季度即墨区生产总值情况怎么样
  // `
}
</script>

<style lang="less" scoped>
@keyframes bounce {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-8px);
  }
}

@keyframes rotate {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes ai1 {
  from {
    transform: translateX(-20px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes ai3 {
  from {
    transform: translateX(20px);
  }
  to {
    transform: translateX(0);
  }
}
@keyframes ai2 {
  from {
    transform: translateY(-20px);
  }
  to {
    transform: translateY(0);
  }
}

@keyframes b1 {
  from {
    transform: translateY(0px);
  }
  to {
    transform: translateY(-8px);
  }
}

.robot-container-empty {
  position: relative;
  color: #212121;
  padding: 53.5px 0px 32px 28.5px;
  .hi {
    font-weight: bold;
    font-size: 32px;
    line-height: 24px;
  }

  .imyourdaddy {
    font-weight: medium;
    font-size: 16px;
    line-height: 24px;
    margin-top: 12.5px;
  }

  .doll-wrapper {
    position: absolute;
    right: 0px;
    bottom: 16px;
    width: 135.5px;
    height: 85px;
    .r-bg {
      position: absolute;
    }
    .bg-1 {
      width: 81.5px;
      height: 70.5px;
      top: 2px;
      animation: ai1 500ms, b1 2s 500ms linear infinite alternate;
    }

    .bg-2 {
      width: 27.5px;
      height: 26.5px;
      left: 80px;
      animation: ai2 500ms, b1 2s 1s linear infinite alternate;
    }

    .bg-3 {
      width: 55px;
      height: 39px;
      top: 20px;
      right: 0;
      animation: ai3 500ms, b1 2s 1.5s linear infinite alternate;
    }

    .empty-doll {
      position: absolute;
      transform: scale(1.25);
      left: 50px;
      bottom: -5px;
    }
  }
}
.doll {
  position: relative;
  display: inline-block;
  height: 50px;
  margin-right: 10px;
  .doll-bounce {
    animation: bounce 1.5s linear infinite alternate-reverse;
    width: 40px;
    height: 40px;
  }

  .rotate-bg {
    width: 200px;
    height: 200px;
    position: absolute;
    left: -80px;
    top: -80px;
    animation: rotate 4s linear infinite;
  }
  .doll-shadow {
    width: 35px;
    height: 13px;
    position: absolute;
    left: 2px;
    bottom: 0px;
  }
}

.robot-container {
  padding-top: 16px;
  text-align: center;
}
</style>
